<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
<div class="container mx-auto max-w-screen-xl mt-5">
     <!-- 左边栏 -->
  <div class="grid grid-cols-4"></div>

  <!-- 右边栏 -->
  <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
    <div class="sticky top-21">
      <!-- 用户信息卡片 -->
      <UserInfoCard></UserInfoCard>
      
      <!-- 分类区域 -->
      <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <div class="p-5">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">分类</h3>
          <div class="flex items-center text-gray-600 hover:text-blue-600 cursor-pointer transition-colors">
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
            </svg>
            <span>aa</span>
          </div>
        </div>
      </div>
      
      <!-- 标签区域 -->
      <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <div class="p-5">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">标签</h3>
          <div class="flex flex-wrap gap-2">
            <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
              wda
            </span>
            <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
              feafea
            </span>
            <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
              hdwaud
            </span>
            <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
              dwadjw
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.header-banner {
  min-height: 160px;
}
</style> 